import { useTransition } from "react";

export default function TabButton({ children, isActive, onClick }: { children: React.ReactNode, isActive: boolean, onClick: () => void }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={() => {
      // 加入非阻塞的 
      startTransition(() => {
        onClick();
      });

      // onClick();
    }}>
      {children}
    </button>
  )
}